import React, { useState } from "react";
import "./styles/index.css"
import InputImage from "./components/InputImage";
import OutputImage from './components/OutputImage';
import Video from "./components/Video";
import { Segmented } from 'antd'
import { input_options } from "../../config"

function Home(props) {
    const [output, setOutput] = useState("");
    const [method, setMethod] = useState("image")

    //传递结果
    const passOutput = (output) => {
        setOutput(output)
    }
    //改变输入方式
    const changeMethod = (val) => {
        setMethod(val)
        console.log(val)
    }
    return (
        <div className="container">

            <div className="input-wrapper">

                <h2 className="text">输入图片</h2>
                <Segmented
                    options={
                        input_options
                    }
                    value={method}
                    onChange={changeMethod}
                />
                {method === 'image' ? <InputImage passOutput={passOutput} /> : <Video passOutput={passOutput} />}

            </div>
            <div className="output-wrapper">
                <h2 className="text">输出图片</h2>
                <OutputImage output={output} />
            </div>
        </div>
    )
}


export default Home;